<template>
	<view class="wrap">
		<view class="banners">
			<u-swiper mode="none" :border-radius="0" height="440" :list="list"></u-swiper>
		</view>
		<view class="notice">
			<view class="inner">
				<view class="icon">
					公告
				</view>
				<view class="barCont">
					<u-notice-bar
					@getMore="getMore"
					@click="detail"
					 :duration="5000"
					 mode="vertical" padding="12rpx 0" bg-color="#FFF0D3" color="#E18028" :more-icon="true"
						:volume-icon="false" font-size="24" :list="info"></u-notice-bar>
				</view>
			</view>

		</view>
		<view v-if="navs.length">
			<view v-for="item in navs" class="icons">
				<view class="tit">
					{{item.name || ''}}
				</view>
				<view v-if="item.functionList.length" class="containerBox">
					<view class="container">
						<view class="box1" @click="navTo(inner)" v-for="inner in item.functionList">
							<image :src="inner.icon" mode=""></image>
							<view class="name">
								{{inner.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>
<script>
	
	export default {
		data() {
			return {
				navs:[],
				info: [
					
				],
				list: [
					
				],
				infoList:[]
			};
		},
		onShow() {
			this.adListFn() //按条件查询广告列表信息
			this.appNoticeListFn() //应用公告列表查询接口
			this.listForAppFn()  // 授权应用功能维护列表信息接口
		},
		methods: {
			detail(i){
				
				console.log(this.infoList[i]?.code,44444);
				uni.navigateTo({
					url: "/pages/sys/home/noticeDetail?code=" + this.infoList[i]?.code
				})
			},
			getMore(){
				uni.navigateTo({
					url:"/pages/sys/home/notice"
				})
				
			},
			// 授权应用功能维护列表信息接口
			listForAppFn(){
				console.log(this.vuex_token?.adminUserId,'&&&&&&&&&&&&&&');
				this.$u.api.listForApp({
					userId:this.vuex_token?.adminUserId
				})
					.then(res => {
						this.navs = res.data
					});
			},
			// 应用公告列表查询接口
			appNoticeListFn(){
				
				this.$u.api.listByGroup({
					groupCode:"APP_NOTICE"
				})
					.then(res => {
						this.infoList = res.data
						this.info = res.data?.map(r=>r.title)
						console.log(this.info,666666);
					});
			},
			//按条件查询广告列表信息
			adListFn(){
				this.$u.api.adList({
						entityCountLimit: 1,
						groupCode:'INDEX',
					})
					.then(res => {
						console.log(res,666666);
						this.list = res.data?.map(r=>{
							return{
								...r,
								image:r.imageUrl
							}
						})
					});
			},
			navTo(url) {
			
				if(url.code=='fxzx'){
					
					console.log(url.appId,'000******');
					console.log(url.url,'111******');
					console.log(url.envVersion,'222******');
					
					
					if(this.vuex_token?.id){
						
						console.log( `${url.url}?miniUserId=${this.vuex_token?.id}`,'我是跳转地址');
						
						uni.navigateToMiniProgram({
							appId: url.appId,
							path: `${url.url}?miniUserId=${this.vuex_token?.id}` , 
							extraData: {},
							envVersion: url.envVersion,
							success(res) {}
						
						})
						// uni.navigateToMiniProgram({
						// 	appId: 'wx6305cf19ac2f3583',
						// 	path: `/pages/sys/app/index?miniUserId=${this.vuex_token?.id}` , 
						// 	extraData: {},
						// 	envVersion: 'trial',
						// 	success(res) {}
						// 	// appId: 需要跳转的小程序APPID（ 必填， string）,
						// 	// path: 需要跳转到小程序的对应页面（ 非必填， 跳转到默认页面， string）,
						// 	// extraData: 携带的参数（ 非必填， object）,
						// 	// envVersion: 要打开的小程序版本， 有效值： develop（ 开发版）， trial（ 体验版），release（ 正式版）（ 非必填， 默认正式版， string）,
						// 	// success: 接口调用成功的回调函数（ 非必填，function）,
						// 	// fail： 接口调用失败的回调函数（ 非必填，function）,
						// 	// complete： 接口调用结束的回调函数（ 调用成功、 失败都会执行）（ 非必填，function）
						// })
						
					}else{
						uni.reLaunch({
							url:'/pages/login/index'
						})
					}
					
					
				}else if(["ptskm","zcxykskm","zchbskm"].includes(url.code)){
						console.log(url,555555);
					uni.navigateTo({
						url: url.url+"?code="+url.code+'&name='+url.name
					});
				}
				
				else{
					uni.navigateTo({
						url: url.url
					});
				}
			},

		}
	};
</script>
<style>
	page {
		background: #FAFAFA;
	}
</style>
<style lang="scss" scoped>
	.other {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 32rpx;

		&:after {
			content: '';
			width: 128rpx;
			display: flex;
		}


		.itemfn {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;
			width: 128rpx;
			font-size: 28rpx;
			margin-right: 52rpx;

			&:nth-child(4n) {
				margin-right: 0;
			}



			.fn_img {
				width: 48rpx;
				margin-bottom: 16rpx;
			}
		}

	}

	.wrap {
		.notice {
			padding: 16rpx;
			border-radius: 24px;
			background: #FAFAFA;
			margin-top: -48rpx;

			position: relative;
			z-index: 99;
			

			.inner {
				border-radius: 168rpx;
				background: #FFF0D3;
				padding: 0 28rpx 0 0;
				display: flex;
				align-items: center;
				padding-left:16rpx ;

				.icon {
					
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: justified;
					width: 88rpx !important;
					height: 40rpx;
					background: #FFA049;
					border-radius: 80rpx 80rpx 80rpx 80rpx;
				}
				.barCont{
					flex:1;
				}
			}
		}

		.icons {
			margin: 16rpx 32rpx;
			background: #FFFFFF;
			// background: #ccc;
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.tit {
				padding: 24rpx 32rpx;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 28rpx;
				color: #FA4A53;
				line-height: 39rpx;
			}

			.containerBox {
				// padding: 0 0 0 10rpx;
				// background: red;
			}

			.container {
				display: flex;
				flex-wrap: wrap;
				/* 允许换行 */
				align-content: flex-start;
				/* 每行左对齐 */
				justify-content: space-between;


				&::after {
					content: "";
					flex: auto;
				}

				.box1 {
					width: 23%;
					// min-width: 122rpx;
					margin-bottom: 40rpx;
				 margin-right: 2%;

					&:nth-child(4n) {
						margin-right: 0;
					}

					// width: calc(25% - 20px); /* 盒子宽度为总宽度的25%，减去间隔 */
					// margin: 10px; /* 设置间隔 */

					image {
						display: block;
						margin: 0 auto;
						width: 48rpx;
						height: 48rpx;
					}

					.name {
						margin-top: 16rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 26rpx;
						color: #4E5969;
						text-align: center;
						line-height: 30rpx;
					}
				}
			}


			.iconlist {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				width: 100%;

				&:after {
					content: '';
					width: 23.5%;
					display: flex;
				}

				.item {
					margin-bottom: 40rpx;
					width: 23.5%;
					margin-right: 2%;
					text-align: center;

					// text-align: center;
					// &.item:nth-child(3n-2),
					// &.item:nth-child(3n-1),
					// &.item:nth-child(3n+1) {
					//   text-align: left;
					// }
					&:nth-child(4n+0) {
						margin-right: 0;
					}

					// https://www.cnblogs.com/veidoo/p/14207012.html

					// .item:nth-child(4n+1) {
					//     /* 添加你想要的样式 */
					// 	text-align: left;
					// }

					image {
						margin: 0 auto;
						width: 48rpx;
						height: 48rpx;
					}

					.name {
						margin-top: 16rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 26rpx;
						color: #4E5969;
						line-height: 30rpx;
					}
				}
			}
		}
	}
</style>
